<!-- 未完成 -->
<template>
  <div>
    <div class="part part-1">
      <h1>1.查询表单</h1>


      {{testValue}}
      <!--<queryForm></queryForm>-->
      <el-form ref="form1" class="form" :model="form1" label-width="120px" label-suffix="：" size="small">
        <formItem v-model="testValue" type="input" label="测试表单项"></formItem>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="输入框">
              <el-input v-model="form1.input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间选择">
              <el-date-picker type="date" v-model="form1.date"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单选框">
              <el-radio-group v-model="form1.radio">
                <el-radio label="单选1"></el-radio>
                <el-radio label="单选2"></el-radio>
                <el-radio label="单选3"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="多选框">
              <el-checkbox-group v-model="form1.checkGroup">
                <el-checkbox label="选择1"></el-checkbox>
                <el-checkbox label="选择2"></el-checkbox>
                <el-checkbox label="选择3"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下拉框">
              <el-select v-model="form1.select">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开关">
              <el-switch v-model="form1.switch"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="省市区级联">
              <el-cascader v-model="form1.cascader" :options="options" :props="{multiple: true}" collapse-tags clearable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="submit">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <div class="part part-2">
      <h1>2.弹窗表单</h1>
      <el-button @click="openWin" size="small">打开弹窗</el-button>
      <el-dialog title="弹窗表单" :visible.sync="isOpenWinFlag">
        <div class="flex-center">
          <el-form ref="form2" :model="form2" size="small">
            <el-row>
              <el-form-item>
                <el-transfer v-model="form2.transfer" :data="transferOptions"></el-transfer>
              </el-form-item>
            </el-row>
          </el-form>
        </div>

        <div slot="footer">
          <el-button type="primary" size="small" @click="submit">提交</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </div>
      </el-dialog>
    </div>

    <div class="part part-3">
      <h1>3.多段添加与删除</h1>
      <el-button @click="add" size="small">新增</el-button>
      <div v-for="(item, index) in list" :key="index">
        区间{{index+1}}:
        <el-input v-model="item.a" class="w200"></el-input> - <el-input v-model="item.b" class="w200"></el-input>
        <el-button @click="del(item, index)" type="text" size="small">删除</el-button>
      </div>
      结果：{{list}}
    </div>
  </div>
</template>

<script>
  import queryForm from './queryForm.vue'
  import formItem from './formItem.vue'
  export default {
    name: "formTest",
    components: {
      queryForm,
      formItem
    },
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        testValue: '',
        form1: {
          input: '',
          date: '',
          switch: false,
          select: '',
          checkGroup: [],
          cascader: null,
          transfer: []
        },
        options: [
          {
            value: 'china',
            label: '中国',
            children: [
              {
                value: 'zhejiang',
                label: '浙江',
                children: [
                  {
                    value: 'hangzhou',
                    label: '杭州',
                  },
                  {
                    value: 'jiaxing',
                    label: '嘉兴',
                  },
                  {
                    value: 'quzhou',
                    label: '衢州',
                  }
                ]
              }
            ]
          }
        ],
        transferOptions: generateData(),

        isOpenWinFlag: false,
        form2: {
          transfer: []
        },

        list: [
          {
            a: '',
            b: ''
          }
        ]
      }
    },
    methods: {
      openWin() {
        this.isOpenWinFlag = true
      },
      cancel() {
        this.isOpenWinFlag = false;
      },
      submit(){},

      add() {
        this.list.push({a: '',b: ''})
      },
      del(item, index) {
        this.list.splice(index, 1)
      }
    }
  }
</script>

<style scoped lang="scss">
.form .el-input,
.form .el-select,
.form .el-cascader{
  width: 100%;
}
</style>
